import React, {Component} from 'react';
import {SearchBar} from 'antd-mobile';
import axios from "axios";
import './SearchNav.scss'

class SearchNav extends Component {
    state = {
        value: '美食',
        id: 1
    };

    componentDidMount() {
        if (this.props.history) {
        } else {
            this.handleClick()
        }
    }

    onChange = (value) => {
        this.setState({value});
    };
    clear = () => {
        this.setState({value: ''});
    };
    handleClick = () => {
        this.autoFocusInst.focus();
    }


    onFocus = () => {
        if (this.props.history) {
            this.props.history.push('/search')
        }
    }
    test = () => {
        axios.get(`/api/test/${this.state.id}`).then(({data}) => {
            console.log(data)
        })
    }

    renderSearch() {
        return (
            <div>
                <SearchBar
                    placeholder="电影/新闻"
                    onSubmit={value => console.log(value, 'onSubmit')}
                    onClear={value => console.log(value, 'onClear')}
                    ref={ref => this.autoFocusInst = ref}
                    onFocus={this.onFocus}
                    onBlur={() => console.log('onBlur')}
                    onCancel={() => this.props.history.back()}
                    onChange={this.onChange}
                    history={this.props.history}
                    isSearch={true}
                    to={"/search"}
                />
            </div>
        )
    }

    render() {
        return (<div>
            {this.renderSearch()}
        </div>);
    }
}

export default SearchNav;
